<template>
    <view class="home">
        <uni-forms
            :model="formData" 
            ref="form" 
            :rules="rules1" 
            validateTrigger="submit" 
            label-width="150rpx"
            err-show-type='none'
        >
            <view
                class="box-1"
            >
                <uni-section
                    type="line"
                    title="许愿池" 
                    sub-title=""
                >
                </uni-section>
                <uni-forms-item
                    name="goodsName"
                    label="许愿信息"
                    required
                >
                    <uni-easyinput 
                        v-model="formData.goodsName"
                        type="textarea" 
                        autoHeight
                        maxlength="100"
                        placeholder="请输入许愿信息,许愿信息尽可能完善规格,后续客服将联系您确认,或主动拨打客服电话进行确认" 
                    />
                </uni-forms-item>
                <myFilePicker
                    name="imageValue1"
                    label="相关图片"
                    uploadModel="商品许愿池编辑"
                    uploadName="许愿商品图片"
                    uploadtype="许愿商品图片"
                    v-model="formData.imageValue1"
                    v-model:f_id="formData.f_id"
                    :required="false"
                />
            </view>
            
            <button
                @click="submit1"
                style=""
                :class="[ isDisabledConfirm ? 'disabled-btn' : 'default-btn']"
            >
                <view style="font-weight: bold;">确认</view>
            </button>
            
         </uni-forms>
    </view>
</template>

<script lang="ts" setup>
    import { onLoad, onShow, onHide, onReady, onUnload, onTabItemTap } from '@dcloudio/uni-app'
    import { markRaw, onBeforeUnmount, reactive, ref, onMounted, watchEffect, watch } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { addShopWishApi } from '@/apis/index'
    import { isPhone, getDateTime, qqMapTransBMap, getDaysDiff, dateformatter } from '@/utils/utils'
    import uploadApi from '@/apis/uploadApi'
    import myFilesPicker from '@/components/myFilesPicker/myFilesPicker.vue'
    import myFilePicker from '@/components/myFilePicker/myFilePicker.vue'
    
    const formData: Ref<any> = ref({
        goodsName: '',
        imageValue1: '',
        f_id: '',
    })
    const rules1: any = reactive({
        goodsName: {
            rules: [
                {
                    required: true,
                    errorMessage: '请输入许愿信息',
                },
            ],
        },
        // zo_ex7: {
        //     rules: [
        //         {
        //             required: true,
        //             errorMessage: '请输入联系电话',
        //         },{
        //             validateFunction: function(rule, value, data, callback){
        //                 if (!isPhone(value)) {
        //                     callback('请输入正确的联系电话')
        //                 }
        //                 return true
        //             }
        //         }
        //     ],
        // },
    })
    const form: Ref<any> = ref(null)
    const isDisabledConfirm: Ref<boolean> = ref(false)
    
    // 如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则，这时候需要通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则
    onReady(() => {
        form.value.setRules(rules1)
    })
    onLoad(async(val) => {
        
    })
    onMounted(() => {
       
    })
    
    const submit1 = () => {
       console.log(form.value)
       console.log(formData.value)
       
       form.value.validate().then(async(res: any) => {
           console.log('表单数据信息：', res);
            // uni.showModal({
            //     showCancel: true,
            //     title: '温馨提示',
            //     content: '您确认下单吗？',
            //     success: async function (res1) {
            //         if (res1.confirm) {
            //             console.log('用户点击确定');  
            //         } else if (res1.cancel) {
            //             console.log('用户点击取消');
            //         }
            //    }
            // });        
           
           // 调接口
           addShopWishApi({
               ...formData.value
           }).then(res => {
               if (res.code == 200) {
                   uni.redirectTo({
                       url: '/pages/treviFountainList/treviFountainList'
                   });
               } else {
                   uni.showToast({
                       title: res.msg,
                       icon: 'error',
                       duration: 1500,
                       mask: true,
                   });
               }
           }).catch(err => {
               uni.showToast({
                    title: '许愿异常',
                    icon: 'error',
                    mask: true,
               });
           })
        }).catch((err: any) =>{
            console.log('表单错误信息：', err);
            uni.showToast({
                title: err[0].errorMessage,
                icon: 'error',
                duration: 1500,
                mask: true,
            });
        })
    }
  
</script>

<style lang="scss" scoped>
    .home {
        background-color: #f2f2f2;
        height: 100vh;
        overflow: scroll;
        // background: rgba(211, 211, 211, 1);
    }
    :deep(.uni-forms) {
        padding: 0rpx 10rpx 10rpx;
        box-sizing: border-box;
    }
    .box-1 {
        background-color: rgba(255, 255, 255, 1);
        box-sizing: border-box;
        padding: 20rpx;
        border-radius: 20rpx;
        margin: 20rpx 0;
    }
    .money-box {
        text-align: center;
        font-weight: bold;
        .money-span-1 {
            color: rgb(153, 153, 153);
        }
        .money-span-2 {
            color: #000;
        }
    }
    .button-img {
        width: 80rpx;
        height: 40rpx;
        margin-right: 20rpx;
    }
    
    :deep(.uni-section .uni-section-header__content .distraction) {
        font-weight: bold;
    }
    .point-box-disabled-input {
        width: 100%;
    }
    // 禁用状态输入框
    :deep(.point-box-disabled-input .uni-easyinput .is-disabled ) {
        background-color: #fff !important;
        color: #999999 !important;
    }
    .checkbox-class {
        display: flex;
        align-items: center;
        padding: 30rpx 0;
        box-sizing: border-box;
    }
    .dialog-content {
        height: 800rpx;
        overflow: scroll;
        .dialog-text-1 {
            font-weight: bold;
        }
        .dialog-text-2 {
            color: #313131;
            text-indent: 70rpx;
            line-height: 50rpx;
        }
    }
    
    .my-disabled-input-box {
        width: 100%;
        :deep(.uni-easyinput .uni-easyinput) {
            background-color: #fff !important;
            font-weight: bold;
        }
    }
    :deep(.my-disabled-input-box .uni-easyinput .is-disabled ) {
        background-color: #fff !important;
        color: #999999 !important;
    }
    .hkzy {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        color: #c7c1c1
    }
    // 组合框下拉选项
    :deep(.uni-combox) {
        background: #fff;
    }
    :deep(.uni-combox .uni-combox__selector .uni-combox__selector-scroll) {
        max-height: 80vh !important;
    }
    
    .checkbox-box {
        height: 100%; 
        display: flex;
        align-items: center;
    }
    :deep(.my-data-select-1 .uni-select__input-box) {
        width: 300rpx;
    }
    .my-popup-box {
        background: #fff; 
        width: 600rpx; 
        box-sizing: border-box; 
        padding: 0 0 30rpx 0; 
        border-radius: 40rpx;
        .my-popup-box-img {
            background: url(https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/transshipmentInformation/popup-bg-2.png); 
            background-size:100% 100%; 
            width:100%; 
            height: 150rpx; 
            border-radius: 50rpx 50rpx 0 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .my-popup-box-img-text {
                font-size: 30rpx;
                letter-spacing: 10rpx;
                font-weight: bold;
            }
        }
        .my-popup-box-content {
            font-size: 26rpx; 
            box-sizing: border-box; 
            padding: 30rpx;
            .my-popup-box-content-text-1 {
                padding-bottom: 20rpx;
            }
        }
    }
    .disabled-btn {
        background-color: rgba(41, 121, 255, 0.6) !important;
        color: #fff9f9 !important;
        display: flex;
        justify-content: center;
        align-items: center; 
        width: 100%;
    }
    .default-btn {
        background-color: #2979ff !important;
        color: #fff !important;
        display: flex;
        justify-content: center;
        align-items: center; 
        width: 100%;
    }
</style>
